import React from 'react'

import '../styles/poker.scss'

export default class Poker extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            tValue: '',
            tType: ''
        }
    }
    componentDidMount() {
        var _this = this;
        this.setState({
            tValue: _this.props.value.substring(0,1),
            tType: _this.props.value.substring(1,2)
        })
    }

    render() {
        var _type = '';
        switch(this.state.tType){
            case 's':
                _type = '♠';
            break;
            case 'h':
                _type = '♥';
            break;
            case 'c':
                _type = '♣';
            break;
            case 'd':
                _type = '♦';
            break;
        }
        return (
            <div className="poker" style={this.state.tType === 'a' || this.state.tType === 'c' ? {color: 'red'}: {color: 'black'}}>
                <span className="top">{this.state.tValue.toUpperCase()}</span>
                <span className="top_icon">{_type}</span>
                <span className="center_icon">{_type}</span>
                <span className="bottom">{this.state.tValue.toUpperCase()}</span>
                <span className="bottom_icon">{_type}</span>
            </div>
        )
    }
}

export {Poker}
